<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>OpenLayers - 快速入门</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
  <link rel="stylesheet" type="text/css"
    href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="/theme/ol.css">
  <link rel="stylesheet" type="text/css" href="/theme/site.css">
  <link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
  <link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
</head>

<body>
  <header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
    <a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70"
        alt="">&nbsp;OpenLayers</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu"
      aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- menu items that get hidden below 768px width -->
    <nav class="collapse navbar-collapse" id="olmenu">
      <ul class="nav navbar-nav ms-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">Docs</a>
          <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
            <a class="dropdown-item" href="/doc/">Docs</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>快速入门</a>
            <a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>常见问题</a>
            <a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>教程</a>

          </div>
        </li>
        <li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button" data-bs-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-sitemap me-1"></i>API
          </a>
          <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
            <a class="dropdown-item" href="/en/latest/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v8.2.0
              (latest)</a </div>
        </li>
      </ul>
    </nav>
  </header>

  <div class="container">
    <h1 id="quick-start">快速入门</h1>
    <p>本入门教程将向您展示如何在网页上放置地图。开发设置使用<a href="https://nodejs.org/">Node</a> (14或更高版本)并要求已安装 <a
        href="https://github.com/git-guides/install-git"><code>git</code></a> 。</p>
    <h2 id="set-up-a-new-project">设置新项目</h2>
    <p>T使用OpenLayers开始构建项目的最简单方法是运行 <code>npm create ol-app</code>:</p>
    <pre><code class="language-bash">npm create ol-app my-app
cd my-app
npm start
</code></pre>
    <p>第一个命令将创建一个名为<code>my-app</code>的目录 (也可以使用不同的名称),
      安装OpenLayers和一个开发服务器，并设置一个基本的应用程序， 包括 <code>index.html</code>,
      <code>main.js</code>, 和 <code>style.css</code>文件。
    </p>
    <p>第二个命令(<code>cd my-app</code>) 将工作目录更改为你的新 <code>my-app</code>项目，
      以便你可以开始使用它。</p>
    <p>第三个命令(<code>npm start</code>) 启动了一个开发服务器，以便你可以在浏览器中查看应用程序的同时进行开发。运行 <code>npm start</code>后, 你会看到输出，告诉你要打开的URL。打开
      <a href="http://localhost:5173/">http://localhost:5173/</a> （或显示的任何URL）查看你的新应用程序。
    </p>
    <h2 id="exploring-the-parts">探索部分</h2>
    <p>OpenLayers应用程序由三个基本部分组成：</p>
    <ul>
      <li>包含地图的元素的HTML标记(<code>index.html</code>)</li>
      <li>初始化地图的JavaScript(<code>main.js</code>)</li>
      <li>确定地图大小和任何其他自定义的CSS样式 (<code>style.css</code>)</li>
    </ul>
    <h3 id="the-markup">示例</h3>
    <p>在文本编辑器中打开 <code>index.html</code>文件。它应该看起来像这样：</p>
    <pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
    &lt;title&gt;快速入门&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;map&quot;&gt;&lt;/div&gt;
    &lt;script type=&quot;module&quot; src=&quot;./main.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
    <p>在示例代码中有两个重要组成部分。一个是用于容纳地图的 <code>&lt;div&gt;</code> 元素和用于引入JavaScript的
      <code>&lt;script&gt;</code> 标签。地图容器或目标应该是一个块级元素 (如 <code>&lt;div&gt;</code>) 并且必须在初始化地图的
      <code>&lt;script&gt;</code>标签之前出现在文档中。
    </p>
    <h2 id="the-script">The script</h2>
    <p>在文本编辑器中打开 <code>main.js</code> 文件。它应该看起来像这样：</p>
    <pre><code class="language-js">import &#39;./style.css&#39;;
import Map from &#39;ol/Map.js&#39;;
import OSM from &#39;ol/source/OSM.js&#39;;
import TileLayer from &#39;ol/layer/Tile.js&#39;;
import View from &#39;ol/View.js&#39;;

const map = new Map({
  target: &#39;map&#39;,
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});
</code></pre>
    <p>OpenLayers被打包成一系列<a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES 模块</a>。 使用
      <code>import</code>
      导入应用程序所需的模块。通过查看<a href="/en/latest/examples/">示例</a>和<a href="/en/latest/apidoc/">API 文档</a> 了解您可能想要使用的模块。
    </p>
    <p> <code>import &#39;./style.css&#39;;</code> 这行代码可能有点出乎意料。在这个例子中，我们使用了
      <a href="https://vitejs.dev/">Vite</a> 作为开发服务器。Vite 允许从JavaScript模块导入CSS。如果您使用的是不同的开发服务器，
      你需要在<code>index.html</code>中通过<code>&lt;link&gt;</code>标签引入 <code>style.css</code>。
    </p>
    <p> <code>main.js</code> 模块充当应用程序的入口点。它初始化一个新的地图，给它一个具有OSM源和描述中心和缩放级别的视图的单层。 <a
        href="./tutorials/concepts.html">阅读</a> 基本概念教程,了解更多关于 <code>Map</code>,
      <code>View</code>, <code>Layer</code>, and <code>Source</code> 组件的信息.
    </p>
    <h2 id="the-style">The style</h2>
    <p>在文本编辑器中打开 <code>style.css</code> 文件， 它应该看起来像这样：</p>
    <pre><code class="language-css">@import &quot;node_modules/ol/ol.css&quot;;

html,
body {
  margin: 0;
  height: 100%;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
</code></pre>
    <p>第一行导入了 <code>ol.css</code> 文件，该文件与 <code>ol</code> 包一起提供 (OpenLayers在 <a
        href="https://www.npmjs.com/package/ol">npm注册表中以<code>ol</code> 包的形式发布</a> )。
      <code>ol</code> 包在上面的 <code>npm create ol-app</code> 步骤中已经安装。 如果您从一个现有的应用程序开始而不是使用
      <code>npm create ol-app</code>，则可以使用
      <code>npm install ol</code>来安装该包。<code>ol.css</code>样式表包含OpenLayers创建的元素的样式，例如放大和缩小按钮。
    </p>
    <p><code>style.css</code> 文件中剩余的规则是使包含地图的 <code>&lt;div id=&quot;map&quot;&gt;</code>
      元素填充整个页面。</p>
    <h2 id="deploying-your-app">部署您的应用程序</h2>
    <p>你可以编辑 <code>index.html</code>, <code>main.js</code>, 或者 <code>style.css</code> 文件并在本地运行(with
      <code>npm start</code>)时在
      浏览器中查看更改结果。完成编辑后，现在是时候打包或构建应用程序，以便将其部署为静态网站(无需运行像Vite这样的开发服务器)。
    </p>
    <p>要构建您的应用程序，请运行以下命令：</p>
    <pre><code class="language-bash">npm run build
</code></pre>
    <p>这将创建一个 <code>dist</code> 目录，其中包含一个新的 <code>index.html</code> 和构成您应用程序的其他资源。这些 <code>dist</code> 文件可以与您的生产网站一起部署。
    </p>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>